<template>
  <div>
    <div style="padding-right: 0%;display: flex">
      <!--根据学号搜索-->
      <el-input v-model="stuNumber" placeholder="请输入学号" style="width: 200px; margin-right: 10px;"></el-input>
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button type="primary" @click="exportExcel">导出Excel</el-button>
    </div>
    <div style="padding-top: 20px">
      <div style="display: flex">
        <div id="majorChart" style="width: 600px; height: 300px;"></div>
        <div id="courseBarChart" style="width: 600px; height: 300px;"></div>
      </div>
      <div id="coursePieChart" style="width: 500px; height: 400px;"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import jsonData from '@/api/ScroeMap.json';

export default {
  name: 'ScoreVisualization',
  data() {
    return {
      stuNumber: '', // 学号
      majorData: jsonData.majorData, // 专业数据
      courseData: jsonData.courseData, // 课程数据
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      // 专业成绩分析和排名
      const majorChart = echarts.init(document.getElementById('majorChart'));
      majorChart.setOption({
        title: { text: '专业成绩分析和排名', left: 'center' },
        tooltip: {},
        xAxis: {
          data: this.majorData.map(item => item.name)
        },
        yAxis: {},
        series: [{
          name: '平均成绩',
          type: 'bar',
          data: this.majorData.map(item => item.value)
        }]
      });

      // 各科目课程的成绩情况（条形图）
      const courseBarChart = echarts.init(document.getElementById('courseBarChart'));
      courseBarChart.setOption({
        title: { text: '各科目课程的成绩情况', left: 40 },
        tooltip: {},
        legend: {
          data: ['平均分', '最高分', '最低分'],
          left: 320
        },
        xAxis: {
          data: this.courseData.map(item => item.name)
        },
        yAxis: {},
        series: [
          {
            name: '平均分',
            type: 'bar',
            data: this.courseData.map(item => item.average)
          },
          {
            name: '最高分',
            type: 'bar',
            data: this.courseData.map(item => item.highest)
          },
          {
            name: '最低分',
            type: 'bar',
            data: this.courseData.map(item => item.lowest)
          }
        ]
      });

      // 各科目课程的成绩情况（饼状图）
      const coursePieChart = echarts.init(document.getElementById('coursePieChart'));
      coursePieChart.setOption({
        title: { text: '各科目成绩分布情况', left: 'center' },
        tooltip: {},
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '成绩分布',
            type: 'pie',
            radius: '50%',
            data: this.courseData.map(item => ({ value: item.average, name: item.name })),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    },
    handleSearch() {
      // 处理搜索逻辑
    },
    exportExcel() {
      // 导出 Excel 逻辑
    }
  }
}
</script>

<style>
/* 在这里添加CSS样式 */
</style>
